<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-08-30 14:41:57
 * @LastEditTime: 2025-09-10 17:05:21
 * @email: muquanyu@outlook.com
-->
<template>
  <div class="main-box">
    <el-card>
      <!-- 明暗模式切换 -->
      <div class="dark-box">
        <el-icon @click="toggleDark()" class="cusor-box" v-if="!isDark">
          <Sunny />
        </el-icon>
        <el-icon @click="toggleDark()" class="cusor-box" v-else>
          <Moon />
        </el-icon>
      </div>
      <!-- 主题色切换 -->
      <div class="theme-outer-box" @click="
        selectThemeBoxVis = !selectThemeBoxVis;
      selectI18nBoxVis = false;
      selectLoginLayoutBoxVis = false;
      ">
        <div :style="{ background: layoutThemeColor }" class="theme-box"></div>
      </div>
      <AnimatePresence>
        <Motion style="position: absolute; top: 46px" v-if="selectThemeBoxVis" :initial="{ opacity: 0.7 }" :animate="{
          opacity: [0.7, 0.8, 0.9, 1],
        }" :exit="{ opacity: 0 }" :transition="{
          duration: 0.5,
          ease: [0.25, 0.1, 0.25, 1], // 类似于 easeInOut
        }">
          <div class="theme-select-box">
            <span v-for="item in themeColors" :key="item.themeName" :style="{
              background: item.color,
              width: '20px',
              height: '20px',
              display: 'inline-block',
              cursor: 'pointer',
              border: '1px solid #333',
              borderRadius: '10%',
            }" @click="changeThemeColor(item.color)"></span>
            <el-tooltip class="box-item" effect="dark" content="灰色模式" placement="bottom">
              <div @click="changeGrayMode()" style="cursor: pointer; border-radius: 5px;" :style="{
                border: sysStore.isGrayMode ? '5px solid var(--el-border-color)' :
                  '1px solid var(--el-border-color-light)', padding: sysStore.isGrayMode ? '1px' : '5px'
              }
                ">
                <div class="gray-mode-box"></div>
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="色弱模式" placement="bottom">
              <div style="display: flex; align-items: center; justify-content: center;
               padding: 2px; cursor: pointer; border-radius: 5px;
                border: 1px solid var(--el-border-color-light)" @click="changeColorWeak()">
                <el-icon>
                  <Hide v-if="!sysStore.isColorWeakMode" />
                  <View v-else />
                </el-icon>
              </div>
            </el-tooltip>

          </div>
        </Motion>
      </AnimatePresence>

      <!-- 国际化切换 -->
      <i class="iconfont icon-zhongying cusor-box i18n-box" @click="
        selectI18nBoxVis = !selectI18nBoxVis;
      selectLoginLayoutBoxVis = false;
      selectThemeBoxVis = false;
      ">
      </i>
      <AnimatePresence>
        <Motion class="cusor-box" @click="selectI18nBoxVis = false" v-if="selectI18nBoxVis"
          style="position: absolute; top: 46px; right: 67px" :initial="{ opacity: 0.7 }" :animate="{
            opacity: [0.7, 0.8, 0.9, 1],
          }" :exit="{ opacity: 0 }" :transition="{
            duration: 0.5,
            ease: [0.25, 0.1, 0.25, 1], // 类似于 easeInOut
          }">
          <div class="i18n-outer-box">
            <div @click="sysStore.setI18n('zh')" style="padding: 2px; border-radius: 5px" :style="{
              border: locale == 'zh' ? '1px dashed' : '',
              background: locale == 'zh' ? 'var(--el-color-primary-light-3)' : '',
            }">
              <i style="font-size: 24px" class="iconfont icon-zhongwen"></i>
            </div>

            <div @click="sysStore.setI18n('en')" style="padding: 2px; border-radius: 5px" :style="{
              border: locale == 'en' ? '1px dashed' : '',
              background: locale == 'en' ? 'var(--el-color-primary-light-3)' : '',
            }">
              <i style="font-size: 24px" class="iconfont icon-yingwen"></i>
            </div>
          </div>
        </Motion>
      </AnimatePresence>
      <!-- 登录页布局切换 -->
      <i style="font-size: 20px" class="iconfont icon-juxingshutu cusor-box" @click="
        selectLoginLayoutBoxVis = !selectLoginLayoutBoxVis;
      selectI18nBoxVis = false;
      selectThemeBoxVis = false;
      "></i>
      <AnimatePresence>
        <Motion @click="selectLoginLayoutBoxVis = false" v-if="selectLoginLayoutBoxVis"
          style="position: absolute; top: 50px" :initial="{ opacity: 0.7 }" :animate="{
            opacity: [0.7, 0.8, 0.9, 1],
          }" :exit="{ opacity: 0 }" :transition="{
            duration: 0.5,
            ease: [0.25, 0.1, 0.25, 1], // 类似于 easeInOut
          }">
          <div class="login-layout-box">
            <el-card>
              <div class="layout-item-box" @click="sysStore.setLoginLayout(0)" :style="{
                background: sysStore.loginLayout == 0 ? 'var(--el-color-primary-light-3)' : '',
              }">
                <i style="font-size: 24px" class="iconfont icon-juzhong"></i>
              </div>
              <div class="layout-item-box" @click="sysStore.setLoginLayout(1)" :style="{
                background: sysStore.loginLayout == 1 ? 'var(--el-color-primary-light-3)' : '',
              }">
                <i style="font-size: 24px" class="iconfont icon-line-layoutleftzuobuju-01"></i>
              </div>
              <div class="layout-item-box" @click="sysStore.setLoginLayout(2)" :style="{
                background: sysStore.loginLayout == 2 ? 'var(--el-color-primary-light-3)' : '',
              }">
                <i style="font-size: 24px" class="iconfont icon-line-layoutrightyoubuju-01"></i>
              </div>
            </el-card>
          </div>
        </Motion>
      </AnimatePresence>

    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useDark, useStorage, useToggle } from "@vueuse/core";
import { useElementPlusTheme } from "use-element-plus-theme";
import { Motion, AnimatePresence } from "motion-v";
import { onMounted, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useSysStore } from "@/store";
const sysStore = useSysStore();
const { locale } = useI18n();

watch(
  () => sysStore.i18n, // 改为函数形式
  (newVal) => {
    locale.value = newVal; // 使用回调参数 newVal
  }
);
const selectThemeBoxVis = ref(false);
const selectI18nBoxVis = ref(false);
const selectLoginLayoutBoxVis = ref(false);
const isDark = useDark();
const handleChangeDark = useToggle(isDark);
const toggleDark = () => {
  handleChangeDark();
};
const layoutThemeColor = useStorage("layout-theme-color", "#409EFF");
const { changeTheme } = useElementPlusTheme(layoutThemeColor.value);
const changeThemeColor = (color: string) => {
  layoutThemeColor.value = color; // 保存主题色
  changeTheme(color); // 修改 Element Plus 组件主题色
  selectThemeBoxVis.value = false;
};

const themeColors = [
  { color: "#409EFF", themeName: "El蓝色" },
  { color: "#722ed1", themeName: "深紫罗兰色" },
  { color: "#eb2f96", themeName: "深粉色" },
  { color: "#f5222d", themeName: "猩红色" },
  { color: "#fa541c", themeName: "橙红色" },
  { color: "#13c2c2", themeName: "绿宝石" },
  { color: "#52c41a", themeName: "酸橙绿" },
];
const changeGrayMode = () => {
  sysStore.setIsGrayMode(!sysStore.isGrayMode)
}
const changeColorWeak = () => {
  sysStore.setIsColorWeakMode(!sysStore.isColorWeakMode)
}
onMounted(() => {
  locale.value = sysStore.i18n
})
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  align-items: center;
  position: relative;

  :deep(.el-card__body) {
    padding: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .dark-box {
    border-radius: 50%;
    border: 1px solid;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .theme-outer-box {
    border: 1px dashed;
    padding: 2px;

    .theme-box {
      width: 20px;
      height: 20px;
      border-radius: 10%;
    }
  }

  .theme-outer-box:hover {
    cursor: pointer;
  }

  .theme-select-box {
    padding: 5px 0px 5px 5px;

    background: var(--el-bg-color-overlay);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    border-radius: 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .i18n-outer-box {
    background: var(--el-bg-color-overlay);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    padding: 5px;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

.cusor-box {
  cursor: pointer;
}

.i18n-box {
  font-size: 24px;
}

.login-layout-box {
  :deep(.el-card__body) {
    padding: 0 !important;
    gap: 0px !important;
  }

  .layout-item-box {
    cursor: pointer;
    padding: 5px;
  }
}

.gray-mode-box {
  background: gray;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>
